<template>
  <Card :bordered="false" dis-hover>
    <Form class="ivu-mb-16">
      <Input
        class="ivu-mr-8"
        v-width="258"
        placeholder="请输入手机号、昵称、openid"
        clearable
        @on-change="keywordChange"
      />
      <DatePicker
        :model-value="defaultDate"
        @on-change="datePickerChange"
        v-width="208"
        type="daterange"
        placeholder="请选择预约日期"
      />
    </Form>
    <Table :columns="columns" :data="list" :loading="loading" border>
      <template #state="{ row }">
        <Badge
          :color="stateColor(row.appointment_name)"
          :text="row.appointment_name"
        />
      </template>
    </Table>
    <Page
      :total="total"
      class="ivu-mt-16"
      show-total
      v-model="params.page"
      show-elevator
      show-sizer
      @on-change="pageChange"
      :page-size="params.pageSize"
      :page-size-opts="[10, 15, 20, 30, 50]"
      @on-page-size-change="pageSizeChange"
    />
  </Card>
</template>
<script>
import { GetMakeList } from '@/api/wsh_user.js'
import { Message } from 'view-ui-plus'
import dayjs from 'dayjs'
export default {
  name: 'userList',
  data () {
    // 默认展示本周数据
    // 下面是搜索框展示的数据
    const end = new Date()
    const start = new Date()
    start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
    // dayjs设置默认搜索的日期
    const start_time = dayjs(start).format('YYYY-MM-DD').toString()
    const end_time = dayjs(end).format('YYYY-MM-DD').toString()
    // 数据
    return {
      total: 0,
      loading: false,
      defaultDate: [start, end],//默认展示本周
      params: {
        keyword: '',//搜索词
        page: 1,//页码
        pageSize: 10,//每页条数
        start_time,
        end_time,
        // 默认排序方式 创建时间 降序
        sort_name: 'created_at',
        sort_type: 2
      },
      columns: [
        // {
        //   type: 'selection',
        //   width: 60,
        //   fixed: 'left',
        //   align: 'center'
        // },
        {
          title: 'id',
          key: 'id',
          width: 65,
          fixed: 'left',
          align: 'center',
          align: 'center'
        },
        {
          title: '就诊人',
          key: 'name',
          width: 118,
          fixed: 'left',
          align: 'center'
        },
        {
          title: '手机号',
          key: 'mobile',
          width: 128,
          align: 'center'
        },
        {
          title: '预约日期',
          key: 'appointment_time',
          width: 250,
          sortable: true,
          align: 'center'
        },
        {
          title: 'openid',
          key: 'openid',
          minWidth: 250,
          tooltip: true,
          align: 'center'
        },
        {
          title: '昵称',
          key: 'nickname',
          minWidth: 118,
          align: 'center'
        },
        {
          title: '预约医生',
          key: 'doctor_name',
          minWidth: 118,
          align: 'center'
        },
        {
          title: '挂号类型',
          key: 'registered_name',
          minWidth: 118,
          align: 'center'
        },
        {
          title: '挂号金额',
          key: 'registered_money',
          width: 170,
          align: 'center'
        },
        {
          title: '预约状态',
          slot: 'state',
          // key: 'appointment_name',
          width: 118,
          align: 'center'
        },
        {
          title: '创建时间',
          key: 'created_at',
          width: 170,
          sortable: true,
          align: 'center'
        },
      ],
      list: [],
    }
  },
  methods: {
    // 获取用户列表数据的函数
    async getData () {
      this.loading = true
      const queryInfo = this.params
      try {
        const res = await GetMakeList(queryInfo)
        this.list = res.list
        this.total = res.total
        this.loading = false
      } catch (err) {
        Message.error('错误:' + err)
      }
    },
    // 页码改变触发的函数
    pageChange (e) {
      this.params.page = e
      this.getData()
    },
    // 切换每页条数触发的函数
    pageSizeChange (e) {
      this.params.pageSize = e
      this.params.page=1
      this.getData()
    },
    // 搜索框关键词改变触发的函数
    keywordChange (e) {
      this.params.page = 1
      this.params.keyword = e.target.value
      this.getData()
    },
    // 日期搜索改变触发的函数
    datePickerChange (date_arr) {
      this.params.page = 1
      this.params.start_time = date_arr[0]
      this.params.end_time = date_arr[1]
      this.getData()
    },
    // 根据预约状态决定前面图标的颜色
    stateColor (state) {
      let color = ''
      switch (state) {
        case '已过期':
          color = 'red'
          break
        case '已就诊':
          color = 'green'
          break
        case '已取消':
          color = 'yellow'
          break
        case '待就诊':
          color = 'blue'
          break
      }
      return color
    }
  },
  mounted () {
    this.getData()
  }
}
</script>
<style lang='less' scoped>
.avatar img {
  width: 35px;
}
</style>
